<template>
  <div>
    <Header />
    <div class="to">
      <router-link to="/products">继续浏览</router-link>
    </div>
    <div class="top">
      <h2>{{ detail.dname }}</h2>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in dbanner" :key="index">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
      <van-dropdown-menu class="drop">
        <van-dropdown-item ref="item" :title="`选择色号: ${name}`">
          <template>
            <div
              @click="onConfirm(ite)"
              class="dropdown"
              v-for="(ite, i) in dguige"
              :key="i"
            >
              <span
                class="black left"
                :style="{ backgroundColor: ite.color }"
              ></span>
              <span class="black right">{{ ite.name }}</span>
            </div>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
      <div class="bottom">
        <div class="price">¥{{ detail.dprice }}</div>
        <div class="btn">
          <span @click="count > 0 ? count-- : ''">-</span>
          <input type="text" v-model="count" />
          <span @click="count++">+</span>
          <span @click="insetShop">加入购物袋</span>
          <span>立即购买</span>
        </div>
      </div>
    </div>
    <div class="text" v-if="dpic == null">
      <div v-for="(del, indx) in dtext" :key="indx">{{ del.deil }}</div>
    </div>
    <div class="del" v-if="dtext == null">
      <img :src="img" v-for="(img, ii) in dpic" :key="ii" />
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import Header from "../components/Header.vue";
export default {
  components: { Header, Footer },
  data() {
    return {
      name: "",
      detail: {},
      dbanner: [],
      dguige: [],
      dpic: [],
      dtext: "",
      count: 1,
    };
  },
  mounted() {
    this.getDetails();
  },
  methods: {
    onConfirm(ite) {
      this.$refs.item.toggle();
      this.name = ite.name;
    },
    getDetails() {
      window.scrollTo(0,0)
      let pid = this.$route.params.pid;
      this.axios.get(`/product/details?pid=${pid}`).then((res) => {
        // console.log(res);
        this.detail = res.data.data[0];
        this.dbanner = JSON.parse(this.detail.dbanner);
        this.dguige = JSON.parse(this.detail.dguige);
        this.dpic = JSON.parse(this.detail.dpic);
        this.dtext = JSON.parse(this.detail.dtext);
        this.name = this.dguige[0].name;
      });
    },
    insetShop() {
      let uid = this.$store.state.userid;
      let product = {
        name: this.detail.dname,
        price: this.detail.dprice,
        pic: this.dbanner[0],
        guige: this.name,
      };
      let shopcar = {
        // sid: 1,
        count: this.count,
        products:JSON.stringify(product),
        uid,
      };
      this.axios.post("/product/addshop", this.qs.stringify(shopcar)).then((res) => {
          console.log(res);
          this.$dialog.alert({
            message:`${res.data.msg}`
          }).then((confirm)=>{
            this.axios.get(`/product/shopcart?uid=${uid}`).then(res=>{
            // console.log(res);
              if(res.data.data){
                let shopcar=res.data.data
                this.$store.commit('getShopcart',shopcar)
              }
            })
          })
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.to {
  width: 80%;
  font-size: 20px;
  margin-top: 80px;
  padding-left: 40px;
  a {
    color: black;
  }
}
.top {
  margin-top: 10px;
  text-align: center;
  .my-swipe {
    margin-top: 20px;
    text-align: center;
    img {
      width: 100%;
    }
  }
}
.drop {
  margin-top: 50px;
  .dropdown {
    position: relative;
    margin-top: 10px;
    height: 50px;
    .black {
      height: 50px;
      width: 50px;
      display: inline-block;
    }
    .left {
      position: absolute;
      top: -5px;
      left: 20px;
    }
    .right {
      position: absolute;
      width: 200px;
      top: -5px;
      left: 80px;
      line-height: 50px;
    }
  }
}
.bottom {
  margin: 40px auto;
  width: 90%;
  .price {
    font-size: 30px;
    text-align: left;
    padding: 5px;
  }
  .btn {
    text-align: left;
    width: 100%;
    span {
      text-align: center;
      display: inline-block;
      line-height: 40px;
      border: 1px solid black;
      &:nth-child(1) {
        width: 9%;
      }
      &:nth-child(3) {
        width: 9%;
      }
      &:nth-child(4) {
        width: 67%;
        background-color: #e1e1e1;
        // border: 0;
      }
      &:last-child {
        // margin-top: 2px;
        width: 98%;
        background-color: black;
        color: white;
        border-color: white;
      }
    }
    input {
      border-left: 0;
      border-right: 0;
      width: 12%;
      height: 38px;
    }
  }
}
.del {
  width: 100%;
  img {
    width: 100%;
    display: block;
  }
}
.text {
  width: 90%;
  margin: 0 auto;
}
</style>
